<style>

</style>

<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>执教课程</legend>
        </fieldset>

        <script type="text/html" id="courseTableBar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="query"> 查询 </button>
            </div>
        </script>

        <table class="layui-hide" lay-filter="courseInfo" id="courseInfo"></table>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>选课学生名单</legend>
        </fieldset>


        <table class="layui-hide" lay-filter="studentInfo" id="studentInfo"></table>

        <script type="text/html" id="studentToolBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="detail">查看</a>
        </script>

    </div>
</div>
<script th:inline="none">
    layui.use(['table','miniPage','jquery','layer'], function () {
        var studentTable = layui.table
            ,courseTable = layui.table
            ,miniPage = layui.miniPage
            ,$ = layui.jquery
            ,layer = layui.layer;
        var eduTeacher = JSON.parse(sessionStorage.getItem("eduTeacher"));

        //课程信息表格
        courseTable.render({
            elem: "#courseInfo",
            url: 'http://localhost/api/teacher/courses',
            headers: {token: eduTeacher.token},
            where: {id: eduTeacher.id},
            toolbar: '#courseTableBar',
            defaultToolbar: ['exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "radio", width: 50},
                {field: "id", title: "编号", width: 80, sort:true, align: "center"},
                {field: "name", title: "课程名",  width: 120},
                {field: "note", title: "课程描述"},
                {field: "period", title: "学时", width: 120},
                {field: "credit", title: "学分", width: 120}
            ]],
            parseData: function (result) {
                return {
                    "code"  : result.code,
                    "msg"   : result.msg,
                    "count" : result.data.length,
                    "data"  : result.data,
                }
            },
            limits: [5,10],
            limit: 5,
            page: true,
            skin: 'line'
        });

        //学生信息表格
        studentTable.render({
            elem: '#studentInfo',
            url: 'http://localhost/api/teacher/course/0/students',
            headers: {token: eduTeacher.token},
            toolbar: true,
            defaultToolbar: ['exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols:[[
                {field: 'id', title: '学生学号', sort: true, align: "center"},
                {field: 'name', title: '学生姓名', align: "center"},
                {field: 'gender', title: '性别',sort: true, align: "center", templet: function (data) {
                        if(data.gender === 0){
                            return "<div>男</div>";
                        }else if (data.gender === 1){
                            return "<div>女</div>";
                        }
                    }},
                {field: 'phone', title: '联系电话',sort: true, align: "center"},
                {title: '操作', minWidth: 150, toolbar: '#studentToolBar', align: "center"}

            ]]
        });

        /*toolbar功能监听*/
        courseTable.on('toolbar(courseInfo)', function (obj) {
            var layEvent = obj.event;

            //全选表格
            if(layEvent === 'query'){
                //根据课程查询选课学生
                var selectedCourse = courseTable.checkStatus('courseInfo');
                if(selectedCourse.data.length === 0){
                    layer.msg("请至少选择一门课程！");
                }else{
                    //查询学生列表
                    var course = selectedCourse.data[0];

                    var options = {
                        url: 'http://localhost/api/teacher/course/'+course.id+'/students',
                        headers: {token: eduTeacher.token},
                    };

                    studentTable.reload('studentInfo', options);

                }

            }
        });


        studentTable.on('tool(studentInfo)', function (obj){
            var data = obj.data;
            var layEvent = obj.event;
            if(layEvent === 'detail'){
                //填充内容
                var content = miniPage.getHrefContent('course/student/'+data.id);
                //窗口尺寸数据
                var openWH = miniPage.getOpenWidthHeight();
                var detail = layer.open({
                    title: '学生详情',
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: [openWH[0] + 'px', 'auto'],
                    content: content,
                });

                $(window).on("resize", function () {
                    layer.full(detail);
                });
                return false;
            }
        });
    })
</script>
